<!-- 设备页面 -->
<template>
  <div class="content1">
    <!-- 设备搜索 -->
    <div class="device">
      <h3>设备查询</h3>
      <div class="seldevice">
        <div class="selresult">搜索结果：{{ deviceselnum }}</div>
        <el-input placeholder="请输入设备名称" v-model="seldevice" class="input-with-select" @keyup.enter.native="seldevicedata(seldevice)">
          <el-select v-model="seldeviceprev" slot="prepend" placeholder="请选择">
            <el-option label="设备ID" value="devid"></el-option>
            <el-option label="设备名称" value="devname"></el-option>
            <!-- <el-option label="设备类别" value="devtype"></el-option> -->
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="seldevicedata(seldevice)"></el-button>
        </el-input>
      </div>
      <el-row class="seltit">
        <el-col :span="9"><div class="grid-content bg-purple">设备名称</div></el-col>
        <el-col :span="9"><div class="grid-content bg-purple-light">所在位置</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light tcenter">定位</div></el-col>
      </el-row>
      <!-- 查询设备列表 -->
      <div class="seldevicelist scrollbar" v-infinite-scroll="seldevicedataload">
        <h1 class="seldevnull" v-if="deviceselnum === 0">暂无数据</h1>
        <el-row type="flex" class="row-bg" justify="space-between" v-for="item in seldevicelist" :key="item.id">
          <el-col :span="6">
            <div class="grid-content bg-purple elips" :title="item.deviceName">{{ item.deviceName }}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light elips" :title="item.address">{{ item.address }}</div>
          </el-col>
          <el-col :span="6" v-if="deviceselnum">
            <div class="grid-content bg-purple devicedetail" @click="warningposition()">
              <i class="iconfont icon-dingwei fl"></i>
              <span>设备定位</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 右侧 -->
  <div class="rightcontent">
    <!-- 设备数量echarts -->
    <div id="c1e1">1</div>
    <!-- 每栋数量展示 -->
    <div id="c1e2">2</div>
    <!-- 数量占比 -->
    <div id="c1e3">3</div>
  </div>



  </div>
</template>

<script>
import {child1Echart1,child1Echart2,child1Echart3} from '@/common/echartsdata.js';

export default {
  name: 'childdev',
  data() {
    return {
      //设备搜索
      deviceshow: false,
      //设备搜索前筛选
      seldeviceprev: 'devname',
      //页数
      snum: 1,
      //搜索结果数量
      deviceselnum: 0,
      //下页无数据
      countnull: true,
      //设备查询
      seldevice: '',
      //设备查询数据
      seldevicelist: []
    };
  },
  created() {},
  mounted() {
    this.load1Echarts();

  },
  components: {},
  methods: {
    //加载echarts
    load1Echarts(){
        child1Echart1();
        child1Echart2();
        child1Echart3();
    },
    //设备搜索
    postseldev(...e) {
    	$.ajax('/jg-api/device/getDeviceList', {
    		data: {
    			deviceId: e[0],
    			deviceName: e[1],
    			deviceType: '',
    			// deviceType:e[2],
    			modelId: '',
    			pageNo: e[3],
    			pageSize: 20,
    		},
    		dataType: 'json',
    		type: 'post',
    		success: (data) => {
    			if (data.success == true) {
    				//console.log(data.data)
    				if (data.data.length == 0) {
    					this.$message('暂无数据');
    				}
    				if (data.data.length >= 20) {
    					this.countnull = false;
    				}

    				if (e[3] == 1) {
    					if (data.count != 0) {
    						this.deviceselnum += data.count;
    						this.seldevicelist = data.data;
    					}
    				} else {
    					if (data.count == 0) {
    						this.countnull = true;
    						return
    					}
    					this.deviceselnum += data.count;
    					this.seldevicelist = this.seldevicelist.concat(data.data);
    				}
    			} else {
    				this.$message(data.message);
    			}
    		}
    	});
    },
    seldevicedata(e) {
      if (e == '') {
        this.$message('请输入搜索值');
        return;
      }
      this.deviceselnum = 0;
      this.countnull == true;
      this.seldevicelist = [];
      document.querySelector('.seldevicelist').scrollTop = '0';
      switch (this.seldeviceprev) {
        case 'devid':
          this.postseldev(e, '', '', 1);
          break;
        case 'devname':
          this.postseldev('', e, '', 1);
          break;
        // case 'devtype':
        // this.postseldev('','',e,1);
        // break;
      }
    },
    //触底分页
    seldevicedataload() {
      if (this.seldevice == '') return;
      switch (this.seldeviceprev) {
        case 'devid':
          if (this.countnull == false) {
            this.snum++;
            this.postseldev(this.seldevice, '', '', this.snum);
          } else {
            if (this.seldevicelist > 20) {
              this.$message('没有更多了');
            }
          }
          break;
        case 'devname':
          if (this.countnull == false) {
            this.snum++;
            this.postseldev('', this.seldevice, '', this.snum);
          } else {
            if (this.seldevicelist > 20) {
              this.$message('没有更多了');
            }
          }
          break;
        // case 'devtype':
        // if(this.countnull==false){
        //  this.snum++;
        //  this.postseldev('','',this.seldevice,this.snum);
        // }else{
        //  this.$message("没有更多了");
        // }
        // break;
      }
    },
    //设备定位
    warningposition(){
      console.log('设备定位')
    }

  },
  computed: {},
  watch: {
    seldeviceprev() {
    	this.seldevice = '';
    	this.deviceselnum = 0;
    	this.seldevicelist = [];
    },
  }
};
</script>

<style lang="less">
  //注：scope下修改elementui无效

//展开下拉
.el-select-dropdown.el-popper{
  color: @ffcolor;
  background-color:rgba(0,0,0,.7) !important;
  .el-select-dropdown__item{
    color: @fcolor;
  }
}
.popper__arrow,.el-popper .popper__arrow::after{
  border-bottom-color:rgba(0,0,0,.7) !important;
}
.el-select-dropdown__item.hover{
  background-color:rgba(164,220,245,.3);
}

.content1 {
  width: 100%;
  height: (100%-@htop);
  position: absolute;
  top: @htop;
  z-index: 9;
  // background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
//设备高度
.device{
  height: 97%;
  padding: 10px;
  margin-left: 30px;
  float: left;
  color: #fff;
  display: flex;
  flex-direction: column;
  width: 350px;
  background: url(~assets/icon/echartsbg1.png) no-repeat;
  background-size: 100% 100%;
  pointer-events: auto;
}
.device h3{
  margin-top: -10px;
  color: @hfcolor;
}
.selresult{
  color: @fcolor;
  text-align: right;
  padding: 5px;
  font-size: 16px;
}
/* 设备搜索 */
.device .seldevice{
	margin-top: 15px;
}
.el-select{
  width: 110px !important;
}
.seldevnull{
	text-align: center;
	margin-top: 50%;
}
/* 设备筛选 */
// 下拉
.el-input-group__prepend{
	width: 27%;
	padding: 0 14px;
	background-color:transparent !important;
	color: @hfcolor;
	border: 0;
}
// 输入
.el-input-group--prepend .el-input__inner{
  background-color:transparent !important;
  border: 1px solid @fcolor;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  color: @ffcolor;
  font-weight: bold;
}
// 搜索
.el-input-group__append{
  border: 1px solid @fcolor;
  border-left: 0;
  background-color:transparent !important;
  .el-icon-search{
    font-size: 20px;
    color: @ffcolor;
  }
}
/* 设备筛选end */
.el-row {
	padding: 12px 0;
}
.seltit{
  color: @ffcolor;
  font-size: 16px;
  font-weight: bold;
}
.devicedetail{
	text-align: center;
}
.devicedetail i{
	font-size: 22px;
	width: 100%;
	text-align: center;
}
.seldevicelist{
  color: @fcolor;
}
.seldevicelist .el-row--flex.is-justify-space-between{
	align-items: center;
}
.seldevicelist{
	cursor: pointer;
	border-top:1px dashed #6c6c6c;
	overflow: auto;
}
.seldevicelist .row-bg{
	border-bottom:1px dashed #6c6c6c;
}
.seldevicelist .row-bg:hover{
	background-color: rgba(0,0,0,.3);
}













// 右侧
.rightcontent{
    // background-color: skyblue;
    display: flex;
    flex-direction: column;
    float: right;
    margin-right: 30px;
    pointer-events: auto;
    // #c1e1{
    #c1e1,#c1e2,#c1e3{
      width: 280px;
      min-height: 220px;
      height: 30%;
      background: url("~assets/icon/echartsbg.png") no-repeat;
      // background-image: url(../../assets/icon/echartsbg.png);
      background-size: 100% 100%;
      padding: 20px 10px;
    }
}

}
</style>
